<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城之家电</title>
        <style type="text/css">
            body{
                background-color: #eeeeee;
            }
            a{
                text-decoration: none;
            }
            .box-bd{
                width: 1226px;
                height: 314px;
                margin: 100px auto;
            }
            .item1{
                float: left;
                width: 234px;
                height: 300px;
                background-color: #19b955;
                transition: all 0.2s ;
            }

            .item1-img{
                display: block;
                width: 234px;
                height: 300px;
                background-image: url("item1.webp");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .brick-item{
                float: left;
                width:992px ;
                height: 314px;
            }
            .item2{
                float: left;
                width: 234px;
                height: 300px;
                background-color: white;
                margin-left: 14px;
                transition: all 0.2s ;
            }
            .item3{
                float: left;
                width: 234px;
                height: 300px;
                background-color:white;
                margin-left: 14px;
                transition: all 0.2s ;
            }
            .item4{
                float: left;
                width: 234px;
                height: 300px;
                background-color: white;
                margin-left: 14px;
                transition: all 0.2s ;
            }
            .item5{
                float: left;
                width: 234px;
                height: 300px;
                background-color: white;
                margin-left: 14px;
                transition: all 0.2s ;
            }
            .figure{
                width: 160px;
                height: 160px;
                margin:12px auto;
            }
            .title{
                font-size: 14px;
                font-weight: 400;
                color: #333;
                text-align: center;
                margin-top: 20px;
                margin-bottom: 0px;
            }
            .desc{
                margin: 0 10px 10px;
                height: 18px;
                font-size: 12px;
                color: #b0b0b0;
                text-align: center;
            }
            .price{
                margin: 0 10px 14px;
                text-align: center;
                color: #ff6700;
            }
            .num{
                text-decoration: line-through;
                color: #b0b0b0;
            }
            .item1:hover {
                box-shadow: 0 15px 30px #b0b0b0; /*添加阴影*/
                transform: translate3d(0, -2px, 0); /*向上浮动*/
            }
            .item2:hover {
                 box-shadow: 0 15px 30px #b0b0b0; /*添加阴影*/
                 transform: translate3d(0, -2px, 0); /*向上浮动*/
             }
            .item3:hover {
                box-shadow: 0 15px 30px #b0b0b0; /*添加阴影*/
                transform: translate3d(0, -2px, 0); /*向上浮动*/
            }
            .item4:hover {
                box-shadow: 0 15px 30px #b0b0b0; /*添加阴影*/
                transform: translate3d(0, -2px, 0); /*向上浮动*/
            }
            .item5:hover {
                box-shadow: 0 15px 30px #b0b0b0; /*添加阴影*/
                transform: translate3d(0, -2px, 0); /*向上浮动*/
            }

        </style>
    </head>
    <body>
        <div class="box-bd">
            <div class="item1">
                <a class="item1-img" href="https://item.mi.com/product/9614.html?selected=9614&pClass=p"></a>
            </div>
            <div class="brick-item">
                <div class="item2">
                    <a href="https://www.mi.com/airconditionc1/v1c1" target="_blank">
                        <div class="figure">
                            <img class="figure" src="xiaomikongtiao1.webp">
                        </div>
                        <h3 class="title">米家互联网空调C1(一级能效)</h3>
                        <p class="desc">变频节能省电，自清洁</p>
                        <p class="price">
                            <span >2099元</span>
                            <span class="num">2699元</span>
                        </p>
                    </a>
                </div>
                <div class="item3">
                    <a href="https://www.mi.com/aircondition/f3w1" target="_blank">
                        <div class="figure">
                            <img class="figure" src="xiaomikongtiao2.jpg">
                        </div>
                        <h3 class="title">米家空调</h3>
                        <p class="desc">出重静音，快速制冷热</p>
                        <p class="price">
                            <span>1799元</span>

                        </p>
                    </a>
                </div>
                <div class="item4">
                    <a href="https://item.mi.com/product/9963.html?selected=9963&pClass=p" target="_blank">
                        <div class="figure">
                            <img class="figure" src="miWashing.webp">
                        </div>
                        <h3 class="title">米家互联网洗烘一体机 Pro 10kg</h3>
                        <p class="desc">智能洗烘，省心省力</p>
                        <p class="price">
                            <span>2999元</span>
                        </p>
                    </a>
                </div>
                <div class="item5">
                    <a href="https://www.mi.com/mitv4A/32" target="_blank">
                        <div class="figure">
                            <img class="figure" src="miTV.jpg">
                        </div>
                        <h3 class="title">小米电视4A 32英寸</h3>
                        <p class="desc">人工智能系统，高清液晶屏</p>
                        <p class="price">
                            <span>799元</span>
                        </p>
                    </a>
                </div>
            </div>

        </div>

    </body>
</html>